<template>
  <!-- 行驶证信息页面 -->
  <div>
    <el-form ref="form" :model="carRun" label-width="80px">
      <el-form-item label="行驶证号码">
        <el-input v-model="carRun.transportCertificateNumber" />
      </el-form-item>
      <el-form-item label="发动机号码">
        <el-input v-model="carRun.engineNumber" />
      </el-form-item>

      <el-form-item label="注册时间">
        <el-col :span="11">
          <el-date-picker
            v-model="carRun.registrationDate"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          />
        </el-col>
      </el-form-item>
      <el-form-item label="强制报废日期">
        <el-col :span="11">
          <el-date-picker
            v-model="carRun.mandatoryScrap"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          />
        </el-col>
      </el-form-item>
      <el-form-item label="整备质量">
        <el-input v-model="carRun.overallQuality" />
      </el-form-item>
      <el-form-item label="检验有效期">
        <el-col :span="11">
          <el-date-picker
            v-model="carRun.validityPeriod"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          />
        </el-col>
      </el-form-item>
      <el-form-item label="核定载质量">
        <el-input v-model="carRun.allowableWeight" />
      </el-form-item>
      <el-form-item label="有效期">
        <el-col :span="11">
          <el-date-picker
            v-model="carRun.expirationDate"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          />
        </el-col>
      </el-form-item>
      <el-form-item class="tupian" label="图片信息">
        <!-- <ImageUpload :limit="3" /> -->
        <el-upload
          action="#"
          list-type="picture-card"
          :file-list="fileList"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus" />
        </el-upload>
        <el-dialog :visible="showDialog" @close="showDialog = false">
          <img style="width: 100%" :src="imgUrl" />
        </el-dialog>
      </el-form-item>

      <el-form-item class="but">
        <el-button type="primary">编辑</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getCarRunApi } from '@/api/car'
export default {
  data() {
    return {
      carRun: {}, // 车辆行驶证详情
      showDialog: false, // 预览弹层的显示状态
      imgUrl: '', // 预览的图片地址
      item: '',
      fileList: [] // 上传图片列表
    }
  },
  async created() {
    const res = await getCarRunApi(this.$route.params.id)
    this.carRun = res.data.data
    // console.log(this.carRun)
    const arr = res.data.data.picture.split(',')
    arr.forEach((item) => {
      const one = {
        name: Math.floor(Math.random() * 99) + 1,
        url: item
      }
      this.fileList.push(one)
    })
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      // file : 点击预览时拿到的图片对象
      // console.log(file)
      this.imgUrl = file.url
      this.showDialog = true
    }
  }
}
</script>
<style scoped lang="scss">
.el-form {
  background-color: pink;
  height: 530px;
  padding-top: 20px;
  .el-form-item {
    // width: 300px;
    float: left;
    margin: 10px 20px;
    ::v-deep {
      .el-form-item__label {
        width: 100px !important;
      }

      .el-form-item__content {
        margin-left: 100px !important;
        // width: 200px !important;
        .el-input__inner {
          width: 180px;
        }
      }
    }
  }
}
.tupian {
  width: 1000px;
}
.el-form-item__content {
  width: 1000px;
  background-color: blue;
}
.but {
  position: absolute;
  left: 400px;
  bottom: 40px;
}
.el-col-11 {
  // background-color: red;
  width: 180px;
}
</style>

